<template>
  <div class="person">
    <Person @showHistoryTrack="showHistoryTrack" v-show="!historyTrack"></Person>
    <HistoryTrack
      v-if="historyTrack"
      :params="params"
      @hideHistoryTrack="hideHistoryTrack"
    ></HistoryTrack>
  </div>
</template>

<script setup lang="ts">
import Person from './person.vue'
import HistoryTrack from './historyTrack.vue'
import { ref } from 'vue'
import { useFocusObject } from '@/utils/useFocusObject'
import { useAddTools } from '@/utils/useAddTools'

const historyTrack = ref(false)
const params = ref({})
const showHistoryTrack = (item) => {
  historyTrack.value = true
  params.value = item
}
const { hasGroup } = useAddTools()
const { focusObject } = useFocusObject()
const hideHistoryTrack = () => {
  historyTrack.value = false
  const group = hasGroup('巷道', false)
  if (group) {
    focusObject(group)
  }
}
</script>

<style lang="scss" scoped>
.person {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow: hidden;
}
</style>
